<template>
	<view class="searchBox">
		<view class="box">
			<view class="title dis-flex flex-y-center">我的粉丝（{{num}}）</view>
			<view class="list dis-flex flex-x-between flex-y-center" v-for="item in list" :key="item.id">
				<image v-if="item.user.avatar" :src="url+item.user.avatar" class="avatar" style="border-radius:50%;height: 80rpx;" />
				<image v-else src="/static/imgs/tou.png" class="avatar" mode="widthFix" />
				<view class="flex-box dis-flex flex-x-between flex-y-center lines">
					<view class="name flex-box">{{item.user.username}}</view>
					<view v-if="item.other == 1" class="talk" >互相关注</view>
					<view v-else class="talk" @click="one(item.user.id)">回关</view>
					<u-icon name="more-dot-fill" color="#252525" size="22" @click="toSelect(item.user.id)"></u-icon>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="address-window" :class="selected==true?'on':''">
			<view class="wrap">
				<view class="toTalk"@click="gotoChat()" >发私信</view>
				<view class="del" @click="remove()">移除粉丝</view>
			</view>
		</view>
		<view class='mask' style="z-index: 999;" catchtouchmove="true" :hidden='selected==false' @click='close'></view>

	</view>
</template>

<script>
	import {
		storeMsg, sendMessage
	} from "../../api/chat.js";
	import {
		myFans,interestOne,delFans
	} from "../../api/my.js"
	import env from '@/utlis/env.js';
	export default {
		name: 'fanCompont', // 粉丝组件
		data() {
			return {
				keywords: '',
				selected: false,
				list: [],
				url:'',
				num:0,
				user_id:'',
			}
		},
		created() {
			this.url = env.baseUrl
			this.Interest()
		},
		methods: {
			async Interest() {
				const res = await myFans().then(res => {
					console.log(res, '获取我的粉丝');
					this.list = res.data.data
					this.num = res.data.num
				});
			
			},
			async one(id) {
				const res = await interestOne({
					user_id:id
				}).then(res => {
					console.log(res, '关注');
					this.Interest();
				});
				
			},
			async remove(){
				const res = await delFans({
					user_id:this.user_id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
					});
					console.log(res, '移除粉丝');
					this.selected = false
					this.Interest();
				});
			},
			onSearch() {

			},
			toSelect(id) {
				this.selected = true
				this.user_id = id
			},
			close() {
				this.selected = false
			},
			gotoChat() {
				this.goChat(this.user_id)
			},
			//直接聊天
			async goChat(user_id) {
				console.log(user_id, 'sssssssssssssssss');
				//创建会话
				await storeMsg({
					'receiver_id': user_id
				}).then(res => {
					if (res.code == 1) {
						let data = res.data
						//跳转到聊天页面
						uni.navigateTo({
							url: '/pages/im/chat?data=' + JSON.stringify(data)
						})
					} else {
						uni.showToast({
							'title': res.msg,
							'icon': 'none',
							'duration': 1000
			
						})
					}
			
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.searchBox {
		width: 100%;

		.search {
			padding: 20rpx 30rpx;
		}

		.box {
			padding: 22rpx 30rpx 0;

			.title {
				font-size: 28rpx;
				color: $uni-text-color-primary;

				.avatars {
					width: 36rpx;
					margin-right: 12rpx;
				}
			}

			.list {
				margin: 34rpx 0;

				.avatar {
					width: 80rpx;
					margin: 0 16rpx 0 0;
				}

				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-text-color;
				}

				.talk {
					width: 125rpx;
					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 26rpx;
					border: 1px solid $uni-text-color-primary;
					margin-right: 26rpx;
					font-size: 24rpx;
					color: $uni-text-color-primary;
				}
			}
		}

		.address-window {
			background: #F6F6F6;
			box-shadow: 0px 0px 30rpx 0px rgba(202, 202, 202, 0.6);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			transform: translate3d(0, 100%, 0);
			transition: all .3s cubic-bezier(.25, .5, .5, .9);
			border-radius: 30rpx 30rpx 0 0;
			padding: 40rpx 30rpx 100rpx;

			&.on {
				transform: translate3d(0, 0, 0);
			}

			.wrap {
				padding: 0 30rpx;
				background: #fff;

				.toTalk {
					padding: 35rpx 0;
					border-bottom: 1px solid #eee;
					font-size: 30rpx;
					color: $uni-text-color;
				}

				.del {
					font-size: 30rpx;
					color: #FE3849;
					padding: 35rpx 0;
				}
			}
		}
	}
</style>